<template>
	<view class="customHead" :style="{ height: headHeight + 'rpx' }">
		<view class="bg">
			<image :src="shopInfo.thum[0].path" mode="aspectFill" class="bgimg" v-if="shopInfo?.thum"></image>
			<image class="bgimg" src="../../static/images/pic2.jpg" mode="aspectFill" v-else></image>
		</view>

		<view class="container" :class="scrollStatus ? 'fold' : ''">
			<view class="statusBar" :style="{ height: statusHeight + 'rpx' }"></view>
			<!-- 联系客服 -->
			<view class="titleBar" :style="{ height: titleHeight + 'px' }" v-if="!scrollStatus">
				<view class="mgr40">
					<navigator url="/pages/shop/index" open-type="switchTab"><u-icon name="arrow-left" size="18" color="#fff"></u-icon></navigator>
				</view>
				<view class="mgr40">
					<navigator url="/pages/shop/index" open-type="switchTab"><u-icon name="home" size="18" color="#fff"></u-icon></navigator>
				</view>
				<view class="flex" v-if="adminStates">
					<view class="mgr20">
						<navigator url="/pages_main/index/index"><u-icon name="kefu-ermai" size="18" color="#fff"></u-icon></navigator>
					</view>
					<text class="fs28 cf">联系客服</text>
				</view>
			</view>
			<view class="skeleton" v-if="!shopInfo">
				<u-skeleton loading avatar rows="1" rowsHeight="20" titleHeight="20" avatarSize="40" class="mgt80"></u-skeleton>
			</view>
			<view class="userBar" v-else>
				<view>
					<image :src="shopInfo.thum[0].path" mode="aspectFill" class="uimg" v-if="shopInfo?.thum"></image>
					<image src="../../static/images/user.jpg" mode="aspectFill" class="uimg" v-else></image>
				</view>
				<view class="userbox flex aic" v-if="shopInfo">
					<view class="left">
						<view class="flex">
							<text class="lm1 fs32 mgr20">{{ shopInfo.name }}</text>
							<u-icon name="phone" size="20" color="#fff" class="mgr10" @click="toPhone"></u-icon>
							<u-icon name="map" size="20" color="#fff" @click="toMap"></u-icon>
						</view>
						<view class="lm1" v-if="!scrollStatus">{{ shopInfo.dsc }}</view>
					</view>
				</view>
				<view class="flex column aic mgl40" v-if="!scrollStatus">
					<view><u-icon name="coupon" size="24" color="#fff"></u-icon></view>
					<view>付款</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { sysStore } from '../../stores/shop/system';
import { brandStore } from '../../stores/shop/brands.js';
import { getmap } from '../../utils/map.js';
import { getUserRole } from '../../utils/tools.js';

const userSys = sysStore();
const titleHeight = userSys.getSys();
const statusHeight = userSys.getTitle();
const scrollStatus = computed(() => userSys.scrollStatus);
const props = defineProps({
	bandId: {
		type: String,
		default: ''
	}
});

let headHeight = computed(() => {
	if (!scrollStatus.value) {
		// #ifdef MP-WEIXIN
		return 300;
		// #endif
		// #ifdef H5
		return 400;
		// #endif
	} else {
		return statusHeight + 120;
	}
});
//获取商户信息
const shopInfo = ref();
const brands = brandStore();
const getData = async () => {
	brands.brandId = props.bandId;
	shopInfo.value = await brands.getData(props.bandId);
};
const showTip = (tip) => {
	uni.showToast({
		title: tip,
		icon: 'none'
	});
};
//拨打电话
const toPhone = () => {
	try {
		if (shopInfo.value.phone) {
			uni.makePhoneCall({
				phoneNumber: shopInfo.value.phone //仅为示例
			});
		} else {
			showTip('商家未设置电话!');
		}
	} catch (e) {
		showTip('设备非法!');
	}
};
//地图
const toMap = () => {
	console.log(shopInfo.value.address);
	if (!shopInfo.value.address) {
		showTip('商家暂未设置地址!');
	} else {
		getmap(shopInfo.value.address);
	}
};
//是否为管理员
const adminStates = ref(false);
onMounted(() => {
	adminStates.value = getUserRole();
});
onShow(() => {
	getData();
});
</script>

<style lang="scss">
.skeleton {
	padding: 20rpx;
	transform: translate(0, -90rpx);
	box-sizing: border-box;
}
.customHead {
	// height: 300rpx;
	overflow: hidden;
	position: relative;

	.bg {
		width: 100%;
		height: 100%;
		background: #000;

		.bgimg {
			width: 100%;
			height: 100%;
			filter: blur(30rpx);
			transform: scale(2);
		}
	}

	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		color: #fff;
		font-size: $uni-font-size-base;
		transition: 0.3;

		.statusBar {
		}

		.titleBar {
			display: flex;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.userBar {
			display: flex;
			padding: 20rpx;
			align-items: center;
			box-sizing: border-box;

			.userbox {
				overflow: hidden;

				.left {
					width: 420rpx;
					box-sizing: border-box;
					border-right: 1px solid #fff;
				}
			}

			.uimg {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				margin-right: 20rpx;
				transition: 0.3;
			}
		}

		&.fold {
			font-size: $uni-font-size-sm;

			.left {
				border-right: none !important;
			}

			.uimg {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
}
</style>
